<template>
	<view>
		<view class="content">
			<view class="title">
				代金券设置
			</view>
			<view class="con">
				<view class="name">
					代金券名称
				</view>
				<view class="text">
					{{quanInfo.name}}
				</view>
			</view>
			<view class="con">
				<view class="name">
					所属年度
				</view>
				<view class="text">
					{{quanInfo.year}}
				</view>
			</view>
			<view class="con">
				<view class="name">
					显示及领取条件
				</view>
				<view class="text">
					{{quanInfo.condition}}
				</view>
			</view>
			<view class="con">
				<view class="name">
					可用起始时间
				</view>
				<view class="text">
					{{quanInfo.start_time}}
				</view>
			</view>
			<view class="con">
				<view class="name">
					有效天数
				</view>
				<view class="text">
					{{quanInfo.expire_day}} 天
				</view>
			</view>
			<view class="con">
				<view class="name">
					说明
				</view>
				<view class="text">
					{{quanInfo.intro?quanInfo.intro:'无'}}
				</view>
			</view>
			<view style="margin: 20rpx;">
				<u-line></u-line>
			</view>
			<view class="con">
				<view class="name">
					开启领取
				</view>
				<view class="text1">
					<switch color="#84E28D" :checked="model.open=='1'&&model.status==1" :disabled="model.status==2" style="transform:scale(0.7)" @change="setChange" />
				</view>
			</view>
			<view class="con">
				<view class="name">
					每人领取数量
				</view>
				<view class="text1">
					<u-input type="number" inputAlign="right" border="none" placeholder="请输入"
						v-model="model.limit_use" @blur="limitBlur"></u-input>
				</view>
			</view>
			<view class="con">
				<view class="name">
					满足额度
				</view>
				<view class="text1">
					<u-input type="digit" inputAlign="right" border="none" placeholder="请输入" v-model="model.min_money"></u-input>
					<span class="span">元</span>
				</view>
			</view>
			<view class="con1">
				<view class="name">
					减免额度 <span class="name-1">（按比例数值越大折扣额度越大，建议不高于{{quanInfo.pt_system}}%）</span>
				</view>
				<view class="con1-1">
					<view class="icon" @click="selectIndex('0')">
						<image class="btn-img1" v-if="selectedItem=='0'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
						</image>
						<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
						按比例
					</view>
					<view class="text1">
						<u-input type="digit" inputAlign="right" border="none" placeholder="请输入"  v-model="model.discount"></u-input>
						<span class="span">%</span>
					</view>
				</view>
				<view class="con1-1">
					<view class="icon" @click="selectIndex('1')">
						<image class="btn-img1" v-if="selectedItem=='1'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
						</image>
						<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
						按金额
					</view>
					<view class="text1">
						<u-input type="digit" inputAlign="right" border="none" placeholder="请输入" v-model="model.money"></u-input>
						<span class="span">元</span>
					</view>
				</view>
			</view>
			<view class="con1">
				<view class="name">
					封面预览
				</view>
				<view class="con1-2">
					<view class="left">
						<view class="m1" @click="chooseImage('cover')">
							<image :src="model.cover" mode="aspectFit"></image>
						</view>
						<view class="text">
							首页封面
						</view>
					</view>
					<view class="right">
						<view class="m2" @click="chooseImage('orders')">
							<image :src="model.orders" mode="aspectFit"></image>
						</view>
						<view class="text">
							下单封面
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="btn1" @click="reset">
					默认
				</view>
				<view class="btn2" @click="confirm">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quanInfo: {},
				selectedItem: '0',
				model:{
					orders:'',
					cover:'',
					type:'DISCOUNT',
					limit_use:1
				}
			};
		},
		onLoad(opt) {
			this.model.city_id = opt.city_id
			this.rq.getData('Coupon/detail',{id:opt.id,city_id:opt.city_id}).then(res=>{
				this.quanInfo = res.data
				this.model.open = res.data.area.is_open
				this.model.limit_use = res.data.area.limit_use?res.data.area.limit_use:1
				this.model.min_money = res.data.area.min_money
				this.model.money = res.data.area.money
				this.model.type = res.data.area.type
				this.selectedItem = res.data.area.type=='DISCOUNT'?0:1
				this.model.discount = res.data.area.discount
				this.model.cover = res.data.area.cover
				this.model.orders = res.data.area.orders
				this.model.id = res.data.id		
				this.model.status = res.data.status
			})
		},
		methods: {			
			setChange() {
				console.log('change');
			},
			selectIndex(paymentType) {
				this.selectedItem = paymentType;
				this.model.type = paymentType==0?'DISCOUNT':'FULL'
				console.log(this.model)
			},
			limitBlur(e){
				console.log(e)
				if(e==0){
					this.model.limit_use = 1
				}
			},
			reset(){
				this.model.open = 1
				this.model.limit_use = 1
				this.model.min_money = ''
				this.model.money = ''
				this.model.type = 'DISCOUNT'
				this.selectedItem = 0
				this.model.discount = ''
				this.model.min_money = ''
				this.model.money = ''
				this.model.orders = ''
				this.model.cover = ''
			},
			chooseImage(field) {
				let _this = this
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						getApp().uploadFile(res.tempFilePaths, {}, (url) => {
							 _this.$set(_this.model,field,url[0])
							 console.log(_this.model,field,url[0])
							uni.hideLoading()
						})
					}
				})
			},
			confirm() {
				this.rq.getData('coupon/save',this.model).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:'设置成功~',
							icon:'none',
							success() {
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							}
						})
					}
				})				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 20rpx auto 0;
		width: 90%;
		min-height: 100vh;
		border-radius: 10px;
		opacity: 1;
		background: #FFFFFF;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 16px;
			letter-spacing: 0em;

			color: #000000;
			padding: 20rpx;
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;

			.btn1 {
				width: 152px;
				height: 38px;
				border-radius: 19px;
				opacity: 1;

				background: #EEEDED;
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: normal;
				line-height: 16px;
				letter-spacing: 0em;

				color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}

			.btn2 {
				width: 152px;
				height: 38px;
				border-radius: 19px;
				opacity: 1;

				background: #FF6666;
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: normal;
				line-height: 16px;
				letter-spacing: 0em;

				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.con1 {
			padding: 10rpx 20rpx;

			.name {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 28rpx;
				letter-spacing: 0em;

				font-variation-settings: "opsz" auto;
				color: #2E2E2E;

				.name-1 {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					letter-spacing: 0em;

					font-variation-settings: "opsz" auto;
					color: #FF6464;
				}
			}

			.con1-2 {
				display: flex;
				align-items: center;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 20rpx;

					.m1 {
						width: 105px;
						height: 87px;
						border-radius: 12px;
						opacity: 1;

						background: #FF9999;
						
						image{
							width: 105px;
							height: 87px;
							border-radius: 12px;
						}
					}

					.text {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: normal;
						line-height: 14px;
						letter-spacing: 0em;
						text-align: center;
						color: #000000;
						margin: 20rpx;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 20rpx;

					.m2 {
						width: 156px;
						height: 51px;
						border-radius: 12px;
						opacity: 1;
						background: #FF9999;
						
						image{
							width: 156px;
							height: 51px;
							border-radius: 12px;
						}
					}

					.text {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: normal;
						line-height: 14px;
						letter-spacing: 0em;
						text-align: center;
						color: #000000;
						margin: 20rpx;
					}
				}
			}

			.con1-1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text1 {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0em;

					font-variation-settings: "opsz" auto;
					color: #000000;

					.span {
						margin-left: 10rpx;
					}
				}

				.icon {
					display: flex;
					align-items: center;
					margin: 20rpx auto;

					.btn-img1 {
						width: 16px;
						height: 16px;
						margin-right: 10rpx;
					}
				}
			}
		}

		.con {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			height: 40rpx;

			.name {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0em;

				font-variation-settings: "opsz" auto;
				color: #2E2E2E;
			}

			.text {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0em;

				font-variation-settings: "opsz" auto;
				color: #FF6464;
			}

			.text1 {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0em;

				font-variation-settings: "opsz" auto;
				color: #000000;

				.span {
					margin-left: 10rpx;
				}
			}
		}

	}
</style>